<template>
    <div style="width: 100%;height: 100%;background-color: skyblue">
        <div id="map" style="width: 100%;height: 100%;"></div>
    </div>
</template>
<script>
    import maps from '@/util/bigMap'

    export default {
        data() {
            return {
                //bigemap地图
                map: null,
                BM: null,
            }
        },
        mounted() {
            this.initMap();
        },
        beforeDestroy() {
            if (this.map) {
                this.map.remove();
            }
        },
        methods: {
            initMap() {
                let that = this;
                maps.then(() => {
                    that.BM = window.BM;
                    //这里之后会换成加载瓦片图的地址
                    that.BM.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
                    that.map = that.BM.map('map', 'bigemap.dc-satellite', {
                        center: [36.79538, 118.03406],
                        zoom: 13,
                        crs: that.BM.CRS.EPSG4326,
                        zoomControl: true,//级别控制
                        preferCanvas:false,//优先使用canvas绘制覆盖物
                        keyboard:true,//键盘操作
                        scrollWheelZoom:true,//鼠标滚轮放大
                        doubleClickZoom:false,//双击放大
                        dragging:true,  //启动拖动
                        attributionControl:false, //不添加对应的版本信息
                    }).addEventListener('zoomend', function (e) {
                        that.zoomLevel = e.target._zoom;
                        console.log('当前级别 : ' + that.zoomLevel);
                    });
                })
            }
        }
    }

</script>